<!-- 播放器 -->
<template lang="">
    <div class="box" id="player">
        <div class="box-left bg-gray">
            <div class="box-video">
                <div class="video-side"></div>
                <div class="box-video-box">
                    <video @click="ifPlay?pauseVideo():playVideo()" @play="ifPlay = true" @pause="ifPlay = false" @timeupdate="updateProgress" @ended="switchVideo('down')" autoplay v-if="videoArr.length" ref="video" :src="videoArr[videoSubscript].videoUrl" type="video/mp4" class="video" id="video"></video>
                </div>
                <div class="video-side">
                    <div class="video-btn">
                        <div class="box-moke box-att">
                            <div class="box-img">
                                <el-image v-if="videoArr.length" class="img"
                                    :src="videoArr[videoSubscript].author.avatar"
                                    fit="cover" />
                                    <div v-if="videoArr.length" @click="onFollow(videoArr[videoSubscript].author.isFollow,videoArr[videoSubscript].author.userId)" class="box-atts">
                                        <font-awesome-icon v-if="!videoArr[videoSubscript].author.isFollow" :icon="['fas', 'plus']" />
                                        <font-awesome-icon v-if="videoArr[videoSubscript].author.isFollow" :icon="['fas', 'check']" />
                                    </div>
                            </div>
                        </div>
                        <!-- <div @click="onLike(videoArr[videoSubscript].isLike,videoArr[videoSubscript].likeCount)" class="box-moke box-like"> -->
                        <div v-show="videoArr.length" class="box-moke box-like">
                            <Vue3Lottie ref="likeLottieContainer" @click="onLike(videoArr[videoSubscript].isLike,videoArr[videoSubscript].videoId,'like')" :scale="1.5" :animationData="likeLottieJson" :autoPlay="false" height="3rem" width="3rem" />
                            <p v-if="videoArr.length">{{ videoArr[videoSubscript].likeCount }}</p>
                        </div>
                        <div v-show="videoArr.length" class="box-moke box-coll">
                            <Vue3Lottie ref="collectLottieContainer" @click="onCollect(videoArr[videoSubscript].isCollect,videoArr[videoSubscript].videoId,'collect')" :animationData="collectLottieJson" :autoPlay="false" height="2rem" width="2rem" />
                            <p v-if="videoArr.length">{{ videoArr[videoSubscript].collectionCount }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 自定义播放组件 -->
            <div class="box-controls">
                <div class="box-sliber">
                    <el-slider class="slider" @input="onDrag" :show-tooltip="false" v-model="progressWidth" size="small" />
                </div>
                <div class="box-btn">
                    <div class="btn-left">
                        <!-- 播放/暂停 -->
                        <div class="play-icon">
                            <el-icon class="icon" v-if="!ifPlay" @click="playVideo"><font-awesome-icon style="color:#6269efb9" :icon="['fas', 'play']" beat-fade size="lg" /></el-icon>
                            <el-icon class="icon" v-if="ifPlay" @click="pauseVideo"><font-awesome-icon style="color:#6269efb9" size="lg" :icon="['fas', 'pause']" /></el-icon>
                        </div>
                        <!-- 时长 -->
                        <div>
                            <p v-if="video">{{ currentTime }}/ {{formatTime(video.duration)}}</p>
                        </div>
                        <!-- 视频信息介绍 -->
                        <div v-if="videoArr.length" class="video-text">
                            <p>@{{videoArr[videoSubscript].author.nickname}} · {{ videoArr[videoSubscript].time }}</p>
                            <p style="margin-left: 0.2rem;"><span>{{videoArr[videoSubscript].title}}</span><span v-for="(item,index) in videoArr[videoSubscript].categories" :key="item.videoId">#{{ item.categoryName }}</span></p>
                        </div>
                    </div>
                    <div class="btn-right">
                        <!-- 静音/取消静音按钮 -->
                        <div class="pointer">
                            <el-dropdown>
                                <span>
                                    <div class="mute-btn" @click="toggleMute">
                                        <font-awesome-icon style="color:#6269efb9" size="lg" v-if="!isMuted" :icon="['fas', 'volume-high']" />
                                        <font-awesome-icon style="color:#6269efb9" size="lg" v-if="isMuted" :icon="['fas', 'volume-xmark']" fade />
                                    </div>
                                </span>
                                <template #dropdown>
                                    <el-slider @input="onMute" v-model="muteValue" vertical height="6rem" />
                                </template>
                            </el-dropdown>
                        </div>
                        <!-- 全屏按钮 -->
                        <div class="fullscreen-btn pointer" @click="toggleFullScreen">
                            <i class="fa fa-expand"></i>
                            <font-awesome-icon style="color:#6269efb9" :icon="['fas', 'maximize']" />
                        </div>
                        <!-- 倍速选择 -->
                        <div>
                            <el-dropdown>
                                <p class="el-dropdown-link">
                                    {{ playbackRate == '1x'?'倍速':`${playbackRate}` }}
                                </p>
                                <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="changePlaybackRate(0.75,'0.75x')">0.75x</el-dropdown-item>
                                    <el-dropdown-item @click="changePlaybackRate(1,'1x')">1x</el-dropdown-item>
                                    <el-dropdown-item @click="changePlaybackRate(1.25,'1.25')">1.25x</el-dropdown-item>
                                    <el-dropdown-item @click="changePlaybackRate(1.5,'1.5x')">1.5x</el-dropdown-item>
                                    <el-dropdown-item @click="changePlaybackRate(2,'2x')">2x</el-dropdown-item>
                                </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="box-right">
            <div class="right-btn">
                <div class="btn-l">
                    <el-button class="l-btn" @click="keyActions.ArrowUp" :icon="ArrowUpBold"></el-button>
                </div>
                <div class="btn-l">
                    <el-button class="l-btn" @click="keyActions.ArrowDown" :icon="ArrowDownBold"></el-button>
                </div>
            </div>

        </div>
    </div>
</template>


<script setup>
import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue';
import { videoList, videoCategory, likeVideo, collectVideo, followUser, getFollowList, getCollectList, searchVideo, getUserInfo } from '@/apis/api/list';
import { useRoute, useRouter } from 'vue-router';
import likeLottieJson from '../../assets/lottie/like.json';
import collectLottieJson from '../../assets/lottie/collect2.json';

import { useCounterStore } from '../../pinia/index'
const store = useCounterStore()


const $route = useRoute()
const $router = useRouter()
const videoSubscript = ref(0)           // 当前播放的视频的下标
let videoArr = reactive([])
const page = ref(1)
const pageSize = ref(10)
const likeLottieContainer = ref()    // 点赞的lottie实例
const collectLottieContainer = ref()    // 收藏的lottie实例
let awaitLike = false
let awaitCollect = false
let categoryId = ""         // // 分类id
let videoId = ""         // 当前播放的视频的id
let keyword = ''         // 搜索列表传进来的搜索值

const currentTime = ref('00:00');
const totalTime = ref('00:00');

const video = ref(null); // 视频元素的引用
const progressWidth = ref(0);  //播放器进度条的值
const isMuted = ref(false);
const ifPlay = ref(false); // 是否正在播放
const playbackRate = ref('1x');  // 倍速
const muteValue = ref(100);  // 音量

// 播放视频
const playVideo = () => {
    video.value.play();
    ifPlay.value = true;
};

// 暂停视频
const pauseVideo = () => {
    video.value.pause();
    ifPlay.value = false;
};

// 视频播放进度改变时改变进度条与播放时间
const updateProgress = () => {
    // 计算视频播放进度（当前时间 / 总时长）并转换为百分比
    const progress = (video.value.currentTime / video.value.duration) * 100;
    progressWidth.value = progress;

    // 计算当前播放时间的分钟数和秒数
    const minutes = Math.floor(video.value.currentTime / 60);
    const seconds = Math.floor(video.value.currentTime % 60);

    // 格式化分钟数和秒数，并将它们拼接成当前播放时间的字符串
    currentTime.value = `${padZero(minutes)}:${padZero(seconds)}`;
};


// 处理视频总时长
const formatTime = (seconds) => {
    seconds = isNaN(seconds) ? 0 : seconds;
    const minute = Math.floor(seconds / 60);
    const second = Math.floor(seconds % 60);
    return (minute < 10 ? '0' : '') + minute + ':' + (second < 10 ? '0' : '') + second;
}

const padZero = (num) => {
    return num.toString().padStart(2, '0');
}

// 拖拽进度条
const onDrag = () => {
    video.value.currentTime = (progressWidth.value / 100) * video.value.duration
}

// 静音
function toggleMute() {
    isMuted.value = !isMuted.value;
    video.value.muted = isMuted.value;
    muteValue.value = isMuted.value ? 0 : 100
    if (isMuted.value === false) {
        video.value.volume = (muteValue.value / 100)
    }
}

// 音量变化
const onMute = () => {
    video.value.volume = (muteValue.value / 100)
    if ((muteValue.value / 100) == 0) {
        isMuted.value = true;
    } else {
        isMuted.value = false;
    }
}

// 全屏
function toggleFullScreen() {
    if (video.value.requestFullscreen) {
        video.value.requestFullscreen();
    } else if (video.value.mozRequestFullScreen) {
        video.value.mozRequestFullScreen();
    } else if (video.value.webkitRequestFullscreen) {
        video.value.webkitRequestFullscreen();
    } else if (video.value.msRequestFullscreen) {
        video.value.msRequestFullscreen();
    }
}

// 倍速
function changePlaybackRate(num, str) {
    playbackRate.value = str
    video.value.playbackRate = parseFloat(num);

}

// 初始化点赞或收藏的状态
const initLottie = (active, type) => {
    let container
    if (type == 'like') {
        container = likeLottieContainer.value
    } else if (type == 'collect') {
        container = collectLottieContainer.value
    }
    // active为激活状态
    if (active) {
        container.goToAndStop(100, true)
        return
    }
    container.goToAndStop(0, true)
}

// 处理关注的事件
const onFollow = async (isFollow, userId) => {
    const actionType = isFollow ? 2 : 1; // 根据 isFollow 来确定 actionType 的值，1 表示关注，2 表示取消关注
    const data = {
        actionType,
        followingId: userId
    };
    try {
        const res = await followUser(data); // 调用 followUser 函数发送关注请求
        if (res.code === 8) {
            if (res.msg != '需要认证才能访问！') {
                setTimeout(() => {
                    window.location.reload();
                }, 120); // 如果返回的错误码为 8，且错误信息不是 '需要认证才能访问！'，则重新加载页面
            }
            return;
        }
        if (res.code === 0) { // 如果返回的错误码为 0，表示关注或取消关注成功
            setTimeout(() => {
                getUserInfo().then(res => { // 获取用户信息
                    if (res.code === 0) { // 如果返回的错误码为 0，表示成功获取用户信息
                        store.setFollowCount(res.data.followCount); // 更新关注数量
                        store.setFollowerCount(res.data.followerCount); // 更新粉丝数量
                    }
                });
            }, 200); // 延时 200 毫秒执行，等待后端数据更新完成
            const message = isFollow ? '取消关注成功' : '关注成功'; // 根据 isFollow 来确定提示信息
            ElMessage({ // 在界面上显示提示消息
                message,
                type: 'success',
            });
            // 同一个用户的所有作品都应该改变状态
            videoArr.forEach(element => {
                if (element.author.userId === userId) {
                    element.author.isFollow = !element.author.isFollow; // 切换关注状态
                }
            });
        }
    } catch (error) {
        console.error(error);
        const errorMessage = isFollow ? '取消关注失败！' : '关注失败！'; // 根据 isFollow 来确定错误提示信息
        ElMessage.error(errorMessage); // 在界面上显示错误消息
    }
};

// 处理点赞的事件
const onLike = async (isLike, videoId, type) => {
    let container = likeLottieContainer.value


    // 判断当前是否已经有动画在播放
    if (awaitLike) { // 如果有其他点赞动画在播放中，则中止当前点赞操作
        container.goToAndStop(0, true); // 将点赞动画返回到初始帧
        awaitLike = true; // 将awaitLike标记为true，表示有其他点赞动画正在播放
        return; // 中止当前点赞操作
    }

    awaitLike = true; // 将awaitLike标记为true，表示当前点赞动画开始播放
    let actionType = isLike ? 2 : 1; // 根据点赞状态设置请求类型，0表示取消点赞，1表示点赞
    const data = {
        actionType,
        videoId
    };

    try {
        const res = await likeVideo(data); // 发送点赞请求，并等待返回结果

        if (res.code === 8) {
            if (res.msg != '需要认证才能访问！') {
                setTimeout(() => {
                    window.location.reload();
                }, 120)
            }
            return
        }

        if (res.code === 0) { // 如果返回结果的code为0，表示点赞请求成功
            const esg = isLike ? '取消点赞成功' : '点赞成功'
            ElMessage({
                message: esg,
                type: 'success',
            })
            if (isLike) { // 如果是取消点赞操作
                container.goToAndStop(0, true); // 将点赞动画返回到初始帧
                videoArr[videoSubscript.value].isLike = false; // 更新当前视频的点赞状态为未点赞
                videoArr[videoSubscript.value].likeCount -= 1
            } else { // 如果是点赞操作
                videoArr[videoSubscript.value].isLike = true; // 更新当前视频的点赞状态为已点赞
                videoArr[videoSubscript.value].likeCount += 1
                // 播放动画
                container.stop(); // 停止点赞动画
                container.play(); // 播放点赞动画
                setTimeout(() => {
                    container.pause(); // 暂停点赞动画
                    awaitLike = false; // 将awaitLike标记为false，表示点赞动画播放结束
                }, 1240);
            }
        } else {
            const errorMessage = isLike ? "取消点赞失败！" : "点赞失败！"; // 
            ElMessage.error(errorMessage)
        }
    } catch (error) { // 如果发生异常
        console.error(error);
        const errorMessage = isLike ? "取消点赞失败！" : "点赞失败！";
        ElMessage.error(errorMessage)
    }

    awaitLike = false; // 将awaitLike标记为false，表示当前点赞动画结束
};

// 处理收藏的事件
const onCollect = async (isCollect, videoId, type) => {
    let container = collectLottieContainer.value


    // 判断当前是否已经有动画在播放
    if (awaitCollect) { // 如果有其他收藏动画在播放中，则中止当前收藏操作
        container.goToAndStop(0, true); // 将收藏动画返回到初始帧
        awaitCollect = true; // 将awaitCollect标记为true，表示有其他收藏动画正在播放
        return; // 中止当前收藏操作
    }

    awaitCollect = true; // 将awaitCollect标记为true，表示当前收藏动画开始播放
    let actionType = isCollect ? 2 : 1; // 根据收藏状态设置请求类型，0表示取消收藏，1表示收藏
    const data = {
        actionType,
        videoId
    };

    try {
        const res = await collectVideo(data); // 发送收藏请求，并等待返回结果
        if (res.code === 8) {
            if (res.msg != '需要认证才能访问！') {
                setTimeout(() => {
                    window.location.reload();
                }, 120)
            }
            return
        }
        if (res.code === 0) { // 如果返回结果的code为0，表示收藏请求成功
            const esg = isCollect ? '取消收藏成功' : '收藏成功'
            ElMessage({
                message: esg,
                type: 'success',
            })
            if (isCollect) { // 如果是取消收藏操作
                container.goToAndStop(0, true); // 将收藏动画返回到初始帧
                videoArr[videoSubscript.value].isCollect = false; // 更新当前视频的收藏状态为未收藏
                videoArr[videoSubscript.value].collectionCount -= 1
            } else { // 如果是收藏操作
                videoArr[videoSubscript.value].isCollect = true; // 更新当前视频的收藏状态为已收藏
                videoArr[videoSubscript.value].collectionCount += 1
                // 播放动画
                container.stop(); // 停止收藏动画
                container.play(); // 播放点收藏动画
                setTimeout(() => {
                    container.pause(); // 暂停收藏动画
                    awaitCollect = false; // 将awaitCollect标记为false，表示收藏动画播放结束
                }, 1000);
            }
        } else {
            const errorMessage = isCollect ? "取消收藏失败！" : "收藏失败！"; // 
            ElMessage.error(errorMessage)
        }
    } catch (error) { // 如果发生异常
        console.error(error);
        const errorMessage = isCollect ? "取消收藏失败！" : "收藏失败！";
        ElMessage.error(errorMessage)
    }

    awaitCollect = false; // 将awaitCollect标记为false，表示当前收藏动画结束
};

const keyActions = {
    ArrowUp: () => switchVideo('up'), // 按下向上箭头键时切换视频逻辑
    ArrowDown: () => switchVideo('down'), // 按下向下箭头键时切换视频逻辑
};

// 处理鼠标事件
const handleMousewheel = (event) => {
    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
    // 向上滚动
    let action = keyActions['ArrowDown']
    // 检查滚轮滚动的方向
    if (delta > 0) {
        // 向上滚动
        action = keyActions['ArrowUp']
    }
    action();
};

// 处理键盘按键事件
const handleKeyDown = (event) => {
    const action = keyActions[event.key];
    if (action) {
        action();
    }
};

// 切换视频
const switchVideo = (direction) => {
    if (direction === 'down') {
        if (videoSubscript.value !== videoArr.length - 1) {
            // 增加视频下标，切换到下一个视频
            videoSubscript.value++
            // 初始化喜欢和收藏的动画状态
            initLottie(videoArr[videoSubscript.value].isLike, "like")
            initLottie(videoArr[videoSubscript.value].isCollect, "collect")
            return
        }
        // 如果已经是最后一个视频，增加页面值
        page.value++
        if (!categoryId || categoryId === '97') {
            // 获取视频列表
            getVideoList()
        } else if (categoryId === '98') {
            // 获取关注列表
            getFollowListS()
        } else if (categoryId === '99') {
            // 获取收藏列表
            getCollectListS()
        } else if (categoryId === '111') {
            // 获取搜索列表
            getSearchList()
        }
        // 获取分类视频列表
        getCategoryVideoList()
    }

    if (videoSubscript.value !== 0) {
        // 减少视频下标，切换到上一个视频
        videoSubscript.value--
        // 初始化喜欢和收藏的动画状态
        initLottie(videoArr[videoSubscript.value].isLike, "like")
        initLottie(videoArr[videoSubscript.value].isCollect, "collect")
    }
};

// 在组件挂载后监听键盘按键事件
onMounted(() => {
    if ($route.query.refresh) {
        $router.replace({ query: {} })
        setTimeout(() => {
            window.location.reload();
        }, 10)
    }
    categoryId = $route.query.categoryId || categoryId; // 获取路由中的 categoryId 参数，如果不存在则使用默认值
    if (categoryId === '97' || !categoryId) { // 如果 categoryId 为 '97' 或者不存在
        getVideoList(); // 调用 getVideoList() 函数，发送请求获取视频列表数据
    } else if (categoryId === '98') {
        page.value = Number($route.query.page) || page.value; // 获取路由中的 page 参数，如果不存在则使用默认值
        videoId = $route.query.videoId || videoId; // 获取路由中的 videoId 参数，如果不存在则使用默认值
        getFollowListS()
    } else if (categoryId === '99') {
        page.value = Number($route.query.page) || page.value; // 获取路由中的 page 参数，如果不存在则使用默认值
        videoId = $route.query.videoId || videoId; // 获取路由中的 videoId 参数，如果不存在则使用默认值
        getCollectListS()
    } else if (categoryId === '111') {
        page.value = Number($route.query.page) || page.value; // 获取路由中的 page 参数，如果不存在则使用默认值
        videoId = $route.query.videoId || videoId; // 获取路由中的 videoId 参数，如果不存在则使用默认值
        keyword = $route.query.keyword
        getSearchList()
    } else {
        page.value = Number($route.query.page) || page.value; // 获取路由中的 page 参数，如果不存在则使用默认值
        videoId = $route.query.videoId || videoId; // 获取路由中的 videoId 参数，如果不存在则使用默认值
        getCategoryVideoList(); // 调用 getCategoryVideoList() 函数，发送请求获取指定分类类型的视频列表数据
    }
    const player = document.querySelector('#player'); // 获取 id 为 'player' 的元素节点
    window.addEventListener('keydown', handleKeyDown); // 监听全局键盘按键事件，调用 handleKeyDown() 函数处理按键事件
    player.addEventListener('mousewheel', handleMousewheel); // 监听鼠标滚动事件，调用 handleMousewheel() 函数处理滚动事件
});

// 监听页面参数变化，解决进入同一界面参数不同时不刷新
watch(
    () => $route.query, // 监听$route.query对象的变化
    (newQuery) => {
        const currentPath = $route.path;     // 当前路径
        const targetPath = '/video';         // 目标路径

        if (currentPath !== targetPath) {
            return; // 如果当前路径不是目标路径，则不执行后续逻辑
        }

        videoSubscript.value = 0; // 重置视频下标
        page.value = 1; // 重置页码
        videoArr = reactive([]); // 重置视频列表

        // 根据参数执行不同的请求逻辑
        categoryId = newQuery.categoryId || categoryId;

        if (categoryId === '97' || !categoryId) {
            getVideoList(); // 获取视频列表
        } else if (categoryId === '98') {
            getFollowListS(); // 获取关注列表
        } else if (categoryId === '90') {
            getCollectListS(); // 获取收藏列表
        } else if (categoryId === '111') {
            getSearchList(); // 获取搜索结果列表
        } else {
            page.value = newQuery.page || page.value; // 获取页码
            videoId = newQuery.videoId || videoId; // 获取视频ID
            getCategoryVideoList(); // 获取特定分类的视频列表
        }
    },
    {
        deep: true, // 深度监听对象内部的变化
    }
);

// 发送请求获取列表数据
const getVideoList = () => {
    const data = {
        page: page.value,
        pageSize: pageSize.value
    }
    videoList(data).then(res => {
        videoArr.push(...res.data)
        initLottie(videoArr[videoSubscript.value].isLike, "like")
        initLottie(videoArr[videoSubscript.value].isCollect, "collect")
    })
}

// 发送请求获取根据分类类型的列表数据
const getCategoryVideoList = () => {
    const data = {
        page: page.value,
        pageSize: pageSize.value,
        categoryId: categoryId
    }
    videoCategory(data).then(res => {
        videoArr.push(...res.data)
        let indexs = 0
        videoArr.forEach((element, index) => {
            if (element.videoId == videoId) {
                indexs = index
            }
        })
        videoSubscript.value = indexs
        initLottie(videoArr[videoSubscript.value].isLike, "like")
        initLottie(videoArr[videoSubscript.value].isCollect, "collect")
    })
};

// 发送请求获取关注列表数据
const getFollowListS = () => {
    const data = {
        page: page.value,
        pageSize: pageSize.value
    }
    getFollowList(data).then(res => {
        if (res.code === 8) {
            window.location.reload();
        }
        videoArr.push(...res.data)
        let indexs = 0
        videoArr.forEach((element, index) => {
            if (element.videoId == videoId) {
                indexs = index
            }
        })
        videoSubscript.value = indexs
        initLottie(videoArr[videoSubscript.value].isLike, "like")
        initLottie(videoArr[videoSubscript.value].isCollect, "collect")
    })
}

// 发送请求获取收藏列表数据
const getCollectListS = () => {
    const data = {
        page: page.value,
        pageSize: pageSize.value
    }
    getCollectList(data).then(res => {
        if (res.code === 8) {
            window.location.reload();
        }
        videoArr.push(...res.data)
        let indexs = 0
        videoArr.forEach((element, index) => {
            if (element.videoId == videoId) {
                indexs = index
            }
        })
        videoSubscript.value = indexs
        initLottie(videoArr[videoSubscript.value].isLike, "like")
        initLottie(videoArr[videoSubscript.value].isCollect, "collect")
    })
}

// 发送请求获取搜索列表数据
const getSearchList = () => {
    const data = {
        page: page.value,
        pageSize: pageSize.value,
        keyword,
        ids: []
    }
    searchVideo(data).then(res => {
        if (res.code === 8) {
            window.location.reload();
        }
        videoArr.push(...res.data)
        let indexs = 0
        videoArr.forEach((element, index) => {
            if (element.videoId == videoId) {
                indexs = index
            }
        })
        videoSubscript.value = indexs
        initLottie(videoArr[videoSubscript.value].isLike, "like")
        initLottie(videoArr[videoSubscript.value].isCollect, "collect")
    })
}

// 在组件卸载前移除键盘按键事件监听
onBeforeUnmount(() => {
    const player = document.querySelector('#player');
    player.removeEventListener('keydown', handleKeyDown);
    window.removeEventListener('mousewheel', handleMousewheel);

});

</script>


<style scoped>
p {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

.box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.box-left {
    width: 94%;
    height: 100%;
    border-radius: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box-video {
    width: 100%;
    height: 88%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.video-side {
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
}

.video-btn {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
}

.box-moke {
    width: 100%;
    height: 20%;
    box-sizing: border-box;
    margin: 0.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 关注 */
.box-att {
    width: 4.4rem;
    height: 4.4rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 2rem;
}

.box-atts {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.2rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0000;
    position: absolute;
    bottom: 0.3rem;
    left: 36%;
    border-radius: 50%;
    font-size: 0.9rem;
}

.box-att>.box-img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
}

.box-att>.box-img img {
    width: 100%;
    height: 100%;
}

.icon-btn {
    font-size: 1.8rem;
}

.box-video-box {
    width: 80%;
    height: 100%;
}


.video {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.video-text {
    display: flex;
    align-items: center;
    margin-bottom: 0.2rem;
    color: rgba(0, 0, 0, 0.8);
}

.video-text p {
    margin-right: 0.3rem;
    font-size: 1.1rem;
}

.video-text span {
    margin-right: 0.3rem;
    font-size: 1rem;
}

.box-controls {
    width: 100%;
    height: 12%;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 2rem 2rem;
}

.box-sliber {
    width: 100%;
    height: 36%;
    display: flex;
    justify-content: center;
}

.box-sliber>.slider {
    width: 98%;
}

.el-slider {
    --el-slider-main-bg-color: #6269efb9;
}

.box-btn {
    height: 64%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 3rem;
    padding-right: 5%;
    box-sizing: border-box;
}

.play-icon {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.play-icon .icon {
    width: 100%;
    height: 100%;
}

.box-right {
    width: 6%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.right-btn {
    width: 60%;
    overflow: hidden;
    height: 14%;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.right-btn>.btn-l {
    width: 100%;
    height: 50%;
}

.right-btn .l-btn {
    width: 100%;
    height: 100%;
    background-color: #6269efc4;
    color: rgb(255, 255, 255);
    border-radius: 0 2rem 2rem 0;
}

.right-btn .l-btn:hover {
    width: 100%;
    height: 100%;
    background-color: rgba(85, 91, 206, 0.6);
    color: rgb(226, 226, 226);
}

.btn-gro {
    display: flex;
    flex-direction: column;
}

.i-size {
    font-size: 20px;
}

.btn-left {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.btn-left>div {
    margin-left: 1rem;
}

.btn-right {
    display: flex;
    align-items: center;
}

.btn-right>div {
    width: 2.6rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.el-dropdown-link {
    cursor: pointer;
    font-size: 1.2rem;
}

.pointer {
    cursor: pointer;
}
</style>